<template>
    <div>
        <div>
            <el-button icon="el-icon-back" @click="back" style="color: #0103af;font-weight:bold ">返回</el-button>
        </div>
        <div>
            <div class="divstyle">
                <span style="font-size: 30px;color: #0040a1;font-weight:bold">新闻资讯管理</span>
            </div>
            <el-divider></el-divider>
            <div class="divstyle">
                <el-card class="box-card">
                    <el-table stripe border :data="AllNews.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                        <el-table-column label="ID" prop="newsid" width="60" align="center"
                                         v-if="showClose"></el-table-column>
                        <el-table-column label="题目" prop="title" align="center"></el-table-column>
                        <el-table-column label="创建时间" prop="newstime" align="center"></el-table-column>
                        <el-table-column label="作者" prop="author" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        plain
                                        @click="deleteNews(scope.row.newsid)">删除
                                </el-button>
                                <!--scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="divstyle">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       small
                                       background
                                       :page-sizes="[5,10,20,100]" :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="AllNews.length">
                        </el-pagination>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "newsDelete",
        data() {
            return {
                currentPage: 1, // 当前页码
                pageSize: 5,// 每页的数据条数
                showClose: false,
                AllNews: [],
            }
        },
        created() {
            this.getAllNews()
        },
        methods: {
            async getAllNews() {
                const {data: res} = await this.$http.get("getAllNews");
                for(let i = 0; i<res.length; i++){
                    res[i].newstime = this.getLocalTime(res[i].newstime)
                }
                this.AllNews = res
            },
            /*将时间戳转换为日期*/
            getLocalTime(timestamp) {
                const date = new Date(timestamp);
                const Y = date.getFullYear() + '-';
                const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return Y + M + D + h + m + s;
                /*let date = new Date(parseInt(item));  //如果是10位，这里需要*1000，如果是13位则不需要*1000
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d*/
            },
            async deleteNews(newsid) {
                console.log(newsid)
                const {data: res} = await this.$http.get("deleteNews?newsid="+newsid);
                if (res === "ok") {
                    await this.getAllNews()
                    this.$message.success("成功");
                } else {
                    this.$message.error("失败")
                }
            },
            back() {
                this.$router.push("/managerHomer/newsManage")
                /*this.$router.go(-1);*/
            }
            ,
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            }
            ,
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            }
            ,
        }
    }
</script>

<style scoped>
    .divstyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-card {
        width: 90%;
    }

    /*分割线样式*/
    .el-divider--horizontal {
        margin: 30px 0;
        background: 0 0;
        border-top: 15px dashed #00eacd;
    }
</style>